<template>
	<view>
		<view class="my-header-box pad-30">
			<view class="header-info flex ">
				<image src="@/static/images/ghost.png" class="my-avatar" mode=""></image>
				<view class="">
					<view class="nickname">
						游客02392
					</view>
					<view class="mt-8">
						ID:458384ufj294fe
					</view>
				</view>
			</view>
			<view class="my-order-box flex-between">
				<navigator class="order-item" hover-class="none">
					<view class="order-icon-box flex-center">
						<image src="@/static/images/my-order1.png" class="order-icon" mode=""></image>
					</view>
					<view class="mt-10 text-center fs-28">
						全部订单
					</view>
				</navigator>
				<navigator class="order-item" hover-class="none">
					<view class="order-icon-box flex-center">
						<image src="@/static/images/my-order2.png" class="order-icon" mode=""></image>
					</view>
					<view class="mt-10 text-center fs-28">
						待发货
					</view>
				</navigator>
				<navigator class="order-item" hover-class="none">
					<view class="order-icon-box flex-center">
						<image src="@/static/images/my-order3.png" class="order-icon" mode=""></image>
					</view>
					<view class="mt-10 text-center fs-28">
						待收货
					</view>
				</navigator>
				<navigator class="order-item" hover-class="none">
					<view class="order-icon-box flex-center">
						<image src="@/static/images/my-order4.png" class="order-icon" mode=""></image>
					</view>
					<view class="mt-10 text-center fs-28">
						已完成
					</view>
				</navigator>
			</view>
			<view class="vip-bind-box flex">
				<view class="flex-center bind-item">
					<image src="@/static/images/my-bind1.png" class="bind1-icon" mode=""></image>
					我的盲盒
				</view>
				<view class="flex-center bind-item">
					<image src="@/static/images/my-bind2.png" class="bind2-icon"  mode=""></image>
					话费券
				</view>
			</view>
			
			
		</view>
		<view class="bind-box mt-30">
			<view class="bind-title-box">
				我的工具栏
			</view>
			<view class="bind-nav-box">
				<navigator hover-class="none" :url="item.url" class="bind-item" v-for="(item, index) in toolNav" :key="index">
					<image :src="item.image" class="nav-image" mode=""></image>
					<view class="fs-26 text-center mt-8">
						{{item.name}}
					</view>
				</navigator>
			</view>
		</view>
		<!-- 邀请好友 -->
		<view class="invited-box">
			<view class="invited-header flex-align flex-between">
				<image src="@/static/images/logo1.jpg" class="invited-image" mode=""></image>
				<view class="fs-28">
					邀请好友，送佣金享优惠
				</view>
				<view class="invited-btn fs-28 flex-center">
					邀请好友
				</view>
			</view>
			<view class="invited-content flex mt-20">
				<view class="invited-item flex-1 text-center">
					<view class="invited-num">
						0
					</view>
					<view class="fs-24 c-9 mt-10">
						当前收益
					</view>
				</view>
				<view class="invited-item flex-1 text-center">
					<view class="invited-num">
						0
					</view>
					<view class="fs-24 c-9 mt-10">
						已邀好友
					</view>
				</view>
				<view class="invited-item flex-1 text-center">
					<view class="invited-num">
						0
					</view>
					<view class="fs-24 c-9 mt-10">
						可提现金额
					</view>
				</view>
				
				
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import nav1 from '@/static/images/my-nav1.png'
	import nav2 from '@/static/images/my-nav2.png'
	import nav3 from '@/static/images/my-nav3.png'
	import nav4 from '@/static/images/my-nav4.png'
	import nav5 from '@/static/images/my-nav5.png'
	import nav6 from '@/static/images/my-nav6.png'
	import nav7 from '@/static/images/my-nav7.png'
	import nav8 from '@/static/images/my-nav8.png'
	import nav9 from '@/static/images/my-nav9.png'
	import nav10 from '@/static/images/my-nav10.png'
	export default {
		data() {
			return {
				toolNav:[
					{
						name:'话费充值',
						image:nav1,
						url:'/pages/my/recharge/recharge'
					},{
						name:'充值记录',
						image:nav2,
						url:'/pages/vipNumber/recharge/rechargeLog'
					},{
						name:'收货地址',
						image:nav3,
						url:''
					},{
						name:'设置',
						image:nav4,
						url:''
					},{
						name:'客服',
						image:nav5,
						url:''
					},{
						name:'签到有奖',
						image:nav6,
						url:''
					},{
						name:'优惠券',
						image:nav7,
						url:''
					},{
						name:'邀请有奖',
						image:nav8,
						url:''
					},{
						name:'团队管理',
						image:nav9,
						url:''
					},{
						name:'我的推广',
						image:nav10,
						url:''
					},
						
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.my-header-box{
	.header-info{
		padding:20rpx 0 20rpx 50rpx;
		align-items: center;
		
		.my-avatar{
			width:120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		
		.nickname{
			font-size: 48rpx;
			
		}
	}
	
	.my-order-box{
		color:#333333;
		padding:20rpx 50rpx;
		border-top:1rpx solid #efefef;
		border-bottom:1rpx solid #efefef;
		
		.order-item{
			.order-icon-box{
				width:100rpx;
				height:100rpx;
			}
			.order-icon{
				width:80rpx;
				height: 80rpx;
			}
		}
	}
	
	.vip-bind-box{
		border-top:1rpx solid #efefef;
		border-bottom:1rpx solid #efefef;
		
		.bind1-icon{
			width:54rpx;
			height:40rpx;
			margin-right: 12rpx;
		}
		.bind2-icon{
			width:53rpx;
			height:40rpx;
			margin-right: 12rpx;
		}
		.bind-item{
			flex:1;
			padding:40rpx 0;
			
			&:first-child{
				border-right:1rpx solid #efefef;
			}
		}
	}
	
}

.bind-title-box{
	padding:0 0 20rpx 30rpx;
}
.bind-box{
	padding-bottom:20rpx;
	border-bottom:1rpx solid #efefef;
}
.bind-nav-box{
	display: flex;
	flex-wrap: wrap;
	
	.bind-item{
		width:25%;
		padding:12rpx 0;
	}
	.nav-image{
		width:48rpx;
		height:48rpx;
		margin:0 auto;
		display: block;
	}
}
.invited-box{
	margin:0rpx 30rpx;
	border:1rpx solid #efefef;
	border-radius: 24rpx;
	margin-top:30rpx;
	
	.invited-header{
		background-color: #333333;
		border-radius: 20rpx 20rpx 0 0;
		color:#FFFFFF;
		padding:12rpx 20rpx;
	}
	
	.invited-content{
		padding-bottom:24rpx;
	}
	
	.invited-num{
		font-size: 30rpx;
		font-weight:bold;
	}
	
	.invited-image{
		width:150rpx;
		height:90rpx;
	}
	.invited-btn{
		background-color:#FF0C0D;
		font-weight: bold;
		height: 64rpx;
		border-radius: 32rpx;
		padding:0 16rpx;
		margin-left:20rpx;
	}
}

</style>
